<!--
 * @Author: [yuantongxin]
 * @Date: 2021-10-23 14:19:55
 * @LastEditors: [yuantongxin]
 * @LastEditTime: 2021-10-25 18:33:51
 * @Description: 
-->
<template>
  <div>
    <!-- 标签页开始 -->
    <div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="所有订单" name="所有订单"></el-tab-pane>
        <el-tab-pane label="待支付" name="待支付"></el-tab-pane>
        <el-tab-pane label="待派单" name="待派单"></el-tab-pane>
        <el-tab-pane label="待接单" name="待接单"></el-tab-pane>
        <el-tab-pane label="待服务" name="待服务"></el-tab-pane>
        <el-tab-pane label="待确认" name="待确认"></el-tab-pane>
        <el-tab-pane label="已完成" name="已完成"></el-tab-pane>
      </el-tabs>
    </div>
    <!-- 标签页结束 -->
    <!-- 表格开始 -->
    <!-- {{ tableData }} -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="订单编号" width="110">
      </el-table-column>
      <el-table-column prop="orderTime" label="下单时间" width="190">
        <template slot-scope="scope">
         {{moment(scope.row.orderTime).format('YYYY-MM-DD HH:mm:SS') }}
        </template>
      </el-table-column>
      <el-table-column prop="total" label="总价" width="190"> </el-table-column>
      <el-table-column prop="status" label="状态" width="190">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.status === '待派单'"
            >待派单</el-tag
          >
          <el-tag type="info" v-else-if="scope.row.status === '待服务'"
            >待服务</el-tag
          >
          <el-tag type="warning" v-else>待接单</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="customerId" label="顾客ID" width="190">
      </el-table-column>
      <el-table-column
        prop="employeeId"
        label="员工ID"
        width="190"
        v-if="this.activeName !== '待支付' && this.activeName !== '待派单'"
      >
      </el-table-column>
      <el-table-column label="操作" width="220">
        <template slot-scope="scope">
          <el-button @click="toDetails(scope.row)" type="text" size="small" style="color:#5282b2"
            >详情</el-button
          >
          <el-button
            type="text"
            size="small"
            v-if="scope.row.status === '待派单'"
            @click="toSend(scope.row.id)"
            >派单</el-button
          >
          <el-button
            type="text"
            size="small"
            v-if="scope.row.status === '待接单'"
            style="color: #fdd058"
            @click="toCancel(scope.row.id)"
            >取消派单</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格结束 -->
    <!-- 分页开始 -->
    <el-pagination
      class="page"
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="params.page"
      :page-sizes="[2, 5, 10, 15, 20]"
      :page-size="params.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <!-- 分页结束 -->
    <!-- 模态框开始 -->
    <el-dialog
      title="派单"
      :visible.sync="visible"
      width="30%"
    >
      <!-- <el-radio v-model="radio" :label="item.realname" v-for="item in tableData.employee" :key="item.id" ></el-radio> -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="visible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 模态框结束 -->
  </div>
</template>

<script>
// 2.引入moment
let moment = require('moment');

// moment().format();
import { pageQuery, sendOrder, cancelSendOrder } from "@/api/order";
export default {
  data() {
    return {
      radio: '1',
      category:[],
      visible:false,
      tableData: [],
      activeName: "所有订单",
      params: {
        page: 1,
        pageSize: 5,
      },
      total: 0,
    };
  },
  created() {
    this.handleClick();
  },
  methods: {
    // 3.挂载moment
    moment,
    async toCancel(orderId) {
      let res = await cancelSendOrder({ orderId });
      this.handleClick();
    },
    async toSend(id) {
      this.visible = true
    },
    //跳转到详情页
    toDetails(item){
      this.$router.push({
        path:'/details/index',
        query:item
      })
    },
    // 点击不同选项卡，根据不同status展示不同数据
    async handleClick() {
      let temp = {
        ...this.params,
      };
      if (this.activeName !== "所有订单") {
        temp.status = this.activeName;
      }
      let res = await pageQuery(temp);
      // console.log(res);
      
      this.tableData = res.data.list;
      this.total = res.data.total;
    },
    handleSizeChange(pageSize) {
      this.params.pageSize = pageSize;
      this.params.page = 1;
      this.handleClick();
    },
    handleCurrentChange(page) {
      this.params.page = page;
      this.handleClick();
    },
  },
};
</script>

<style lang="scss" scoped>
</style>